forum

Home / DeveloperSection / Forums / How to display data in the table using Angular js

Ask Question
Manoj Bhatt

Manoj Bhatt

Follow

Can you answer this question?

Answer

1 Answers

Anupam Mishra

Anupam Mishra

04-Mar-2016
Hi Manoj,

If you want to use MVC pattern in angular js in your ASP.NET MVC Application Then you will be  design  Their Model,Controller and view.

Here we have  Student model is below:

answer 516630403120542

Now, My Model of angular js named Model.js

var app = angular.module("MyApp", []);



Controller.js:

app.controller("HomeController", function ($scope, myService) {
    $scope.divStudent = false;
    GetAllStudent();
    //To Get All Records 
    function GetAllStudent() {
        var getData = myService.getStudents();
         getData.then(function (stud) {
            $scope.Students = stud.data;
        }, function () {
            $('#alertcontent').html('Error in getting record');
            $('#alertmodal').modal("show");
        });
    }


Service.js:


app.service("myService", function ($http) {
    //get All Student
    this.getStudents = function () {
        debugger;
        return $http.get("Home/GetAll");
        
    };
 
     //get StudentBy Id
    this.getStudent = function (StudentID) {
        var response = $http({
            method: "post",
            url: "Home/getStudentByNo",
            params: {
                id: JSON.stringify(StudentID)
            }
        });
        return response;
    }


Home Controller:(ASP.NET 'HomeController')


answer 516630403120542


Index.cshtml


  <html ng-app="MyApp"><divclass="container">
        <divng-controller="HomeController">
            <divclass="panel panel-default">
                <divclass="panel-heading">
                    <divclass="panel-title">
                        <h3>Student Details Page</h3>
                    </div>
                    <divstyle="float: right; font-size: 80%; position: relative; top: -29px">
 <inputtype="button"class="btnAdd btn btn-success"value=" Add Student"ng-click="AddStudentDiv()"/>
       <inputtype="button"class="btnAdd btn btn-success"value=" History"ng-click="HistoryDiv()"/>
                    </div>
                </div>
                <divstyle="padding-top: 30px"class="panel-body">
                    <divclass="divList">
               <pclass="divHead">Student List</p>
                        <divstyle="float: right; font-size: 120%; position: relative; top: -29px">
                            <inputtype="text"ng-model="letter"placeholder="Search By Name">
                        </div>
                        <tablecellpadding="12"class="table table-bordered table-hover">
                            <tr>
                                <td><b>Student ID</b></td>
                                <td><b>First Name</b></td>
                                <td><b>Last Name</b></td>
                                <td><b>Enrollment Date</b></td>
                                <td><b>Actions</b></td>
                            </tr>
        <trng-repeat="student in Students|filter: letter |orderBy: 'FirstName'|orderBy: 'LastName'">
                                <td>{{student.StudentID}}
                                </td>
                                <td>{{student.FirstName}}
                                </td>
                                <td>{{student.LastName}}
                                </td>
                                <td>{{student.EnrollmentDate.slice(6,-2)|date:"dd-MMM-yyyy"}}
                                </td>
                                <td>
 <spanng-click="editmodelStudent(student)"style="cursor: pointer; color: #0746D4;"class="btnAdd b tn btn-default btn-xs">Edit</span>
 <spanng-click="deleteStudent(student)"style="cursor: pointer; color: #0746D4;"class="btnRed btn        btn-default btn-xs">Delete</span>
               </td>
           </tr>
    </table>
  </div>


Output:


answer 516630403120542

MindStick Training

Liked By